import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input } from 'antd';
import http from '@/src/utils/https';


type PropsType = {
    handelsearch: Function
}

const HousingSearch: React.FC<PropsType> = ({ handelsearch }) => {
    const [form] = Form.useForm()
    // console.log(istab, "istab")
    const onFinish = (values: any) => {
        handelsearch(values)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    let [ad, setad] = useState(''),
        [ci, setci] = useState(''),
        [ar, setar] = useState('');


    //城市列表
    let [address, setAddress] = useState([] as any)
    let [city, setCity] = useState([] as any)
    let [area, setArea] = useState([] as any)

    //获取省份
    useEffect(() => {
        if (address.length <= 0) {
            getAddress()
        }
    }, [])
    const getAddress = async () => {
        let res = await http.get("/address/district")
        console.log(res.data.data, "address")
        if (res.data.code == 200) {
            setAddress(res.data.data)
        }
    }
    //获取市区
    useEffect(() => {
        setCity([] as any)
        setArea([] as any)
        if (ad != "") {
            form.setFieldValue("city", "")
            form.setFieldValue("area", "")
            getCity()
        }
    }, [ad])
    const getCity = async () => {
        let res = await http.get("/address/city", { params: { sqe: ad } })
        if (res.data.code == 200) {
            console.log(res.data.data, "city")
            setCity(res.data.data)
        }
    }

    //获取城镇
    useEffect(() => {
        setArea([] as any)
        if (ci != "") {
            form.setFieldValue("area", "")
            getArea()
        }
    }, [ci])

    const getArea = async () => {
        let res = await http.get("/address/area", { params: { sqe: ci } })
        if (res.data.code == 200) {
            console.log(res.data.data, "area")
            setArea(res.data.data)
        }
    }
    return (
        <Form
            form={form}
            name="basica"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ width: "100%" }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            layout="inline"
        >

            <Form.Item label="省份" name="address" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 120 }} value={ad} onChange={(value) => {
                    setad(value)
                }}>
                    {
                        address.length > 0 && address.map((item: any) => (
                            <Select.Option value={item.district_sqe} key={item.id}>{item.district_name}</Select.Option>
                        ))
                    }
                </Select>
            </Form.Item>
            <Form.Item label="城市" name="city" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 120 }} value={ci} onChange={(value) => {
                    setci(value)
                }}>
                    {
                        city.length > 0 && city.map((item: any) => (
                            <Select.Option value={item.district_sqe} key={item.id}>{item.district_name}</Select.Option>
                        ))
                    }
                </Select>
            </Form.Item>
            <Form.Item label="区县" name="area" wrapperCol={{ offset: 0, span: 24 }}>
                <Select style={{ width: 120 }} value={ar} onChange={(value) => {
                    setar(value)
                }}>
                    {
                        area.length > 0 && area.map((item: any) => (
                            <Select.Option value={item.id} key={item.id}>{item.district_name}</Select.Option>
                        ))
                    }
                </Select>
            </Form.Item>
            <Form.Item
                label="房源名称"
                name="username"
                rules={[{ message: '输一点儿东西阿小弟弟' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
            </Form.Item>
        </Form>
    )
}

export default HousingSearch